<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <script src="/static/echarts.min.js"></script>
</head>
<body>
<div style="text-align: center"><span style="font-size: 30px"><b>数据分析页</b></span><a href="/vue/game/dc/data/">刷新</a></div>
<div>
    <div id="main" style="width: 900px;height:800px;display: inline-block;margin-left: 20px;margin-top: 30px"></div>
    <div id="main3" style="width: 900px;height:800px;display: inline-block"></div>
</div>

<div id="main2" style="width: 1300px;height:800px;margin: auto"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '数据分析(样本数据：{{ all }}条)'
        },
        color: ['#3398DB'],
        tooltip: {},
        legend: {
            data: ['百分比']
        },
        xAxis: {
            data: ["豹子", "大", "小", "顺子", "无奖励"],
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '百分比',
            type: 'bar',
            data: {{ list }}
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var option2 = {
        title: {
            text: '数据结果详情--样本数据：{{ all }}条'
        },
        color: ['#3398DB'],
        tooltip: {},
        legend: {
            data: ['频数']
        },
        xAxis: {
            data: ["3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '频数',
            type: 'bar',
            data: {{ list2 }}
        }]
    };
    myChart2.setOption(option2);
    var option3 = {
        title: {
            text: '数据分析扇形图--样本数据：{{ all }}条',
            subtext: '郭东波制作',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['豹子', '大', '小', '顺子', '无奖励']
        },
        series: [
            {
                name: '分析结果',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{value: {{ list3.value1 }}, name: '豹子'},
                    {value: {{ list3.value3 }}, name: '大'},
                    {value: {{ list3.value4 }}, name: '小'},
                    {value: {{ list3.value2 }}, name: '顺子'},
                    {value: {{ list3.value0 }}, name: '无奖励'}],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option3);
</script>
</body>
</html>